<template>
  <div class="page">
    <div class="top">
      <div class="icon">
        <div class="left">
          <img src="../assets/icon/zhixiangzuo.svg" alt="" class="toLeft" />
        </div>
        <div class="middle">
          <span>ETH 質押</span>
        </div>
        <div class="right">
          <img src="../assets/icon/lishidingdan.svg" alt="" />
          <img src="../assets/icon/wentiguanli.svg" alt="" class="wenti" />
        </div>
      </div>
    </div>
    <div class="content">
      <div class="box">
        <div class="title">
          <img src="../assets/icon/yulan.svg" alt="" />
          <span>我質押的 ETH</span>
        </div>
        <div class="num">0.09999998 ETH</div>
        <div class="br"></div>
        <div class="title"><span>30 天獎勵</span></div>
        <div class="num">0 ETH</div>
      </div>
      <div class="cank">
        參考 APR
        <img src="../assets/icon/a-fund-fillgupiao-mianxing.svg" alt="" />
      </div>
      <div class="num">2.68%</div>
      <div class="btnBox">
        <div class="btn">贖回</div>
        <div class="btn active">質押 ETH</div>
      </div>

      <div class="bz">
        <div class="title">3 步驟開始賺幣</div>
        <div class="bzt">
          <div class="left">
            <div class="box"><span>1</span></div>
            <div class="line"></div>
            <div class="box"><span>2</span></div>
            <div class="line two"></div>
            <div class="box"><span>3</span></div>
          </div>
          <div class="right">
            <div class="text" style="margin-bottom: 33px">
              <div class="label">質押 ETH</div>
              <div class="msg">
                質押 ETH 並收取作為質押 ETH 代幣化資產的 WBETH。
              </div>
            </div>
            <div class="text" style="margin-bottom: 28px">
              <div class="label">賺取每日獎勵</div>
              <div class="msg">
                持有 WBETH 賺取收益，或將 WBETH 連用於多個應用案例。隨著 ETH
                質押獎勵不斷積累，1 WBETH 的價值會逐漸超過 1 ETH - 目前為：
                <div>
                  <span>1 WBETH</span> ≈ <span>1.02989252 ETH</span>
                  <img src="../assets/icon/jiaohuan2.svg" alt="" />
                </div>
              </div>
            </div>
            <div class="text">
              <div class="label">
                贖回 ETH 的彈性
                <img src="../assets/icon/htmal5icon28.svg" alt="" />
              </div>
              <div class="msg">將 WBETH 贖回為 ETH。</div>
            </div>
          </div>
        </div>
      </div>
      <div class="bian">
        <div class="title">幣安為您設想周全</div>
        <div class="ite">
          <img src="../assets/icon/charulianjie.svg" alt="" />
          僅 0.0001 ETH 即可開始
        </div>
        <div class="ite">
          <img src="../assets/icon/charulianjie.svg" alt="" />
          幣安承擔沒罰款
        </div>
        <div class="ite">
          <img src="../assets/icon/charulianjie.svg" alt="" />
          彈性出場政策
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'oneThree',
  data() {
    return {}
  },
  methods: {}
}
</script>

<style scoped>
.content > .box {
  border: 1px solid #333943;
  border-radius: 10px;
  padding: 0 20px;
  margin-bottom: 20px;
  color: #e4eaf0;
}
.content > .box .num {
  margin: 10px 0 15px 0;
}
.content > .box .br {
  width: 100%;
  height: 1px;
  background-color: #333943;
}
.content > .box img {
  width: 15px;
  margin-right: 5px;
}
.content > .box .title {
  font-size: 10px;
  display: flex;
  align-items: center;
  padding-top: 20px;
}
.content > .box .title span {
  border-bottom: 1px dashed #e4eaf0;
  display: inline-block;
  padding-bottom: 3px;
}
.bian {
  margin-top: 30px;
  color: #e4eaf0;
}
.bian img {
  width: 20px;
  margin-right: 5px;
}
.bian .title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}
.bian .ite {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.bz .right .label {
  color: #e4eaf0;
  display: flex;
  align-items: center;
}
.bz .right img {
  width: 15px;
}
.bz .right .msg {
  color: #757c85;
  font-size: 12px;
}
.bz .right img {
  margin-left: 5px;
}
.bz .right .msg div span {
  background-color: #333b48;
  color: #e4eaf0;
  border-radius: 3px;
  padding: 3px 5px;
}
.bz .right .msg div {
  display: flex;
  align-items: center;
  margin-top: 5px;
}
.bz {
  margin-top: 30px;
}
.bz .title {
  color: #e4eaf0;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}
.bz .bzt {
  display: flex;
}
.bz .bzt .left {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 10px;
}
.bz .bzt .left .line {
  width: 2px;
  height: 50px;
  background-color: #eaeff6;
}
.bz .bzt .left .line.two {
  height: 100px;
}
.bz .bzt .box span {
  transform: rotate(-45deg);
  display: inline-block;
}
.bz .bzt .box {
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 3px;
  text-align: center;
  transform: rotate(45deg);
  background-color: #eaeff6;
  color: #363c45;
}
.content > .num {
  color: #65ba92;
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0 20px 0;
}
.btnBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.btnBox .btn {
  width: 48%;
  background-color: #2e313a;
  color: #e4eaf0;
  text-align: center;
  height: 40px;
  line-height: 40px;
  border-radius: 10px;
}

.btnBox .btn.active {
  background-color: #f3d650;
  color: #1b1d23;
}
.cank {
  display: flex;
  align-items: center;
  color: #e4eaf0;
}
.cank img {
  width: 15px;
  margin-left: 5px;
}
.what {
  color: #f3d650;
  margin: 20px 0;
}
.zq {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #e4eaf0;
  font-size: 20px;
  margin-top: 20px;
}
.zq img {
  margin-left: 6px;
  width: 50px;
}
.content {
  position: relative;
  height: calc(100% - 50px);
}

.page {
  background-color: #21262f;
  padding: 0 20px;
  padding-bottom: 20px;
}
.top {
}
.top img {
  width: 20px;
}
.top .icon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  color: #fff;
}
.top .icon .middle {
  display: flex;
  align-items: center;
}
.top .icon .middle img {
  margin-right: 5px;
}
.wenti {
  margin-left: 20px;
}
</style>
